<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>本例用于测试background-clip/background-origin属性</title>
<style type="text/css">
body{
}
#body1{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}

.bgc{
float:left;
width:200px;
height:100px;
margin:20px;
padding:10px;
border:2px fuchsia solid;
	}
.mgd{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:10px;
	border:20px fuchsia solid;
	overflow:auto;
}
#body2{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body2 div{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:20px;
	border:20px #0000FF dotted;
	overflow:auto;
	background-color:#F00;
}
#bg1{
}
#bg2{
	background-clip:padding-box;
}
#bg3{
	background-clip:content-box;
}
#body3{
	display:block;
	float:none;
	width:100%;
	height:auto;
	overflow:hidden;
	*padding-bottom:20px;
}
#body3 div{
	float:left;
	width:200px;
	height:100px;
	margin:20px;
	padding:20px;
	border:20px #0000FF dotted;
	overflow:auto;
	background-image:url(images/eg_bg_03.gif);
	background-repeat:no-repeat;
}
#bg4{
}
#bg5{
	background-origin:border-box;
}
#bg6{
	background-origin:content-box;
}
</style>
</head>
<body>
<div id="body1">
<div class="bgc">本例用于测试background-clip/background-origin属性</div>
</div>
<div>以下用于测试background-clip属性,规定背景的绘制区域。</div>
<div id="body2">
	<div id="bg1">
    	<p>border-box,背景被裁剪到边框盒,默认值。</p>
    </div>
	<div id="bg2">
    	<p>padding-box,背景被裁剪到内边距框。</p>
    </div>
    <div id="bg3">
    	<p>content-box,背景被裁剪到内容框。</p>
    </div>
</div>
<div>以下用于测试background-origin属性,规定背景图片的定位区域。</div>
<div id="body3">
	<div id="bg4">
    	<p>padding-box,背景图像相对于内边距框来定位,默认值。</p>
    </div>
	<div id="bg5">
    	<p>border-box,背景图像相对于边框盒来定位。</p>
    </div>
    <div id="bg6">
    	<p>content-box,背景图像相对于内容框来定位。</p>
    </div>
</div>
<div>
注释：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。<br/>
border如果已经定义颜色,则border-box将只填充无颜色部分。<br/>
<br/>
IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。<br/>
background-origin仅是用于相对定位(左上角定位),如果背景图片够大,也可能覆盖border区域。<br/>
注释：如果背景图像的 background-attachment 属性为 "fixed"，则background-origin属性没有效果。<br/>
<br/>
一般情况下，这两个属性很少会用到。
</div>
</body>
</html>